import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart' show InkWell, Material;
import 'package:fnos_tv_desktop/view/main/home/scroll_control.dart';
import 'package:provider/provider.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../../../core/api/api.dart';
import '../../../core/model/media_databases.dart';
import '../main_page_model.dart';

class MediaDbListRow extends StatefulWidget {
  const MediaDbListRow({super.key});

  @override
  State<MediaDbListRow> createState() => _MediaDbListRowState();
}

class _MediaDbListRowState extends State<MediaDbListRow> {
  final scrollController = ScrollController();

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final mediaDbs = context.watch<MediaDatabases>();
    return Column(
      children: [
        ListTile(title: Text('媒体库')),
        SizedBox(
          height: 164,
          child: ScrollControl(
            controller: scrollController,
            child: ListView.builder(
              controller: scrollController,
              padding: EdgeInsets.symmetric(horizontal: 12),
              scrollDirection: Axis.horizontal,
              itemCount: mediaDbs.databases?.length ?? 0,
              itemBuilder: (context, index) {
                final db = mediaDbs.databases![index];
                return MediaDbItem(db: db);
              },
            ),
          ),
        ),
      ],
    );
  }
}

class MediaDbItem extends StatelessWidget {
  final MediaDatabase db;

  const MediaDbItem({super.key, required this.db});

  @override
  Widget build(BuildContext context) {
    final api = Api();
    return Container(
      margin: const EdgeInsets.all(4),
      child: AspectRatio(
        aspectRatio: 1.5,
        child: Stack(
          children: [
            Card(
              padding: EdgeInsets.zero,
              borderColor: FluentTheme.of(context).shadowColor,
              borderRadius: BorderRadius.circular(12),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Column(
                  children: [
                    Expanded(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: db.posters.map((e) {
                          return Expanded(
                            child: Container(
                              constraints: BoxConstraints.tightForFinite(
                                height: 164,
                              ),
                              child: CachedNetworkImage(
                                imageUrl: api.imageUrl(e),
                                fit: BoxFit.cover,
                              ),
                            ),
                          );
                        }).toList(),
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      constraints: BoxConstraints.tightForFinite(height: 40),
                      decoration: BoxDecoration(
                        color: Colors.black.withValues(alpha: 0.8),
                      ),
                      child: Text(db.title),
                    ),
                  ],
                ),
              ),
            ),
            Material(
              color: Colors.transparent,
              child: InkWell(
                hoverColor: Colors.transparent,
                onTap: () {
                  context.read<MainPageModel>().goToMediaDb(db);
                },
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
